<template>
  <Echart
      id="rightBottom"
      :options="option"
      :isWatchAutoInit="true"
      class="right_bottom_inner"
      v-if="pageflag"
      ref="charts"
      @handleChartEvent="handleChartEvent"
  />
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import { currentGET } from "api/modules";
import {graphic} from "echarts"
import dataValues from "@/assets/js/data_values.json"
import moment from "moment/moment";

export default {
  data() {
    return {
      option: {},
      pageflag: false,
      timer: null,
      len:0,
      dataIndex:0,
      xAxisDataDate:null,
      xAxisDataTime:null,
      yAxisData:null,
      myChart:null,
      dataLen:0
    };
  },
  created() {

  },
  props:{
    socketData: Object
  },
  watch:{
    '$store.state.setting.echartsAutoTime':{
      handler () {
        this.clearData();
        this.switper();
      },
      deep: true
    }
  },
  mounted() {
    this.getData();
  },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    handleChartEvent(val){
      // this.myChart = val;
      // setTimeout(()=>{
      //   this.myChart.setOption(this.option, true)
      // },1000)
    },
    getData() {
      if(this.socketData.change_rate){
        this.pageflag = true;
        const now = new Date();
        this.xAxisDataDate = (`${now.getFullYear()}-${now.getMonth()+1}-${now.getDay()}`)
        this.xAxisDataTime = moment(new Date()).format('HH:mm:ss')
        this.yAxisData = parseFloat((this.socketData.change_rate * 100).toFixed(2))
        this.$nextTick(() => {
          this.init(this.xAxisDataDate,this.xAxisDataTime, this.yAxisData);
        });
      }
      this.switper();
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
          looper,
          this.$store.state.setting.echartsAutoTime
      );
      let myChart = this.$refs.charts.chart;
      myChart.on("mouseover", (params) => {
        this.clearData();
      });
      myChart.on("mouseout", (params) => {
        this.timer = setInterval(
            looper,
            this.$store.state.setting.echartsAutoTime
        );
      });
    },
    init(xDataDate, xDataTime ,yData) {
      const value = parseFloat((yData / 100 ).toFixed(2))
      this.option = {
        // animation: true,
        // animationDuration: this.$store.state.setting.echartsAutoTime,
        title: [
          {
            text: xDataTime,
            x: 'center',
            y: 'top',
            top: 50,
            itemGap: 2,
            textStyle: {
              color: '#fff',
              fontSize: 20,
              fontWeight: 'bold',
            },
          },
            {
          text: `{a|${yData}}{b|%}`,
          x: 'center',
          y: 'center',
          itemGap: 2,
          textStyle: {
            rich: {
              a: {
                color: '#fff',
                fontSize: 20,
                fontWeight: 'bold',
              },
              b: {
                color: '#fff',
                fontSize: 14,
              },
            },
          },
        }],
        series: [{
          animationDuration: this.$store.state.setting.echartsAutoTime,
          type: 'liquidFill',
          radius: '90%',
          data: [value, value - 0.02],
          color: ['rgba(83, 211, 228, 0.79)', 'rgba(83, 211, 228, 1)'],

          backgroundStyle: {
            color: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.55,
              colorStops: [{
                offset: 0,
                color: 'rgba(7, 112, 135, 0.01)', // 100% 处的颜色
              },  {
                offset: 1,
                color: 'rgba(7, 112, 135, 0.69)',
              }],
              globalCoord: false, // 缺省为 false
            },
          },
          outline: {
            show: false,
          },
          label: {
            show: false,
          },
        }],
      };
    },
  },
};
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;
}
</style>